<template>
  <div class="refercommi">
    <div class="card">
      <div class="card_title">
        佣金查询
      </div>
      <div class="main">
        <div class="searchbox">
          <a-input-search
            placeholder="输入商品id/商品链接"
            enter-button="查询"
            v-model="search"
            size="large"
            @search="getgoodscommission"
            style="max-width:448px;border-radius: 4px;"
          />
        </div>
        <div class="resbox" v-if="commission!==''">
          当前佣金 <span class="commrate">{{ commission }}</span> %
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getgoodscommission } from '@/api/otherApi'

  export default {
    name: 'Refercommi',
    data () {
      return {
        search: '',
        commission: ''
      }
    },
    computed: {},
    created () {

    },
    mounted () {

    },
    methods: {
      getUrl (urlstr, name) {
        // console.log('urlstr', urlstr,'name',name);
        const i = urlstr.indexOf('?')
        console.log('i', i)
        if (i !== -1) {
          urlstr = urlstr.slice(i, urlstr.length) // ?id=xxxxx&a=xxx
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)
          if (r != null) {
            return unescape(r[2])
          } else {
            return null
          }
        } else {
          return urlstr
        }
        // 使用 let id = this.getUrl(this.value,'id');//tips: id是string
      },
      getgoodscommission () {
        const id = this.getUrl(this.search, 'id')
        getgoodscommission({
          goods_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.commission = res.data.commission_rate
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .refercommi {
    .card {
      border-radius: 6px;
      min-height: 100vh;
      padding: 14px 10px 10px 24px;

    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .main {
      max-width: 448px;
      margin: 0 auto;

      .searchbox {
        /deep/ .ant-input {
          border-radius: 4px 0 0 4px;
        }

        /deep/ .ant-btn {
          width: 80px;
          border-radius: 0 4px 4px 0;
        }
      }

      .resbox {
        margin-top: 129px;
        text-align: center;
        color: #101010;
        font-size: 16px;

        .commrate {
          font-size: 25px;
          font-weight: 600;
        }
      }
    }
  }
</style>
